<template>
  <div class="home">
    <div class="header">
      <div class="header-left">
        <div class="txt">中部地区</div>
        <van-icon name="arrow" />
      </div>
      <div class="header-right">
        <form action="/">
          <van-search v-model="value" placeholder="请输入搜索关键词" />
        </form>
      </div>
    </div>
    <!--  -->
    <van-swipe :autoplay="3000" lazy-render>
      <van-swipe-item v-for="item in HomeArr.slides" :key="item.id">
        <img :src="item.pic_image_url" />
      </van-swipe-item>
    </van-swipe>
    <!--  -->
    <van-row class="ksannui">
      <van-col
        span="11"
        v-for="(item, index) in HomeArr.nav2s"
        :key="item.id"
        @click="goBarkj(index)"
      >
        <van-image :src="item.pic_image_url" />
      </van-col>
    </van-row>
    <!--  -->
    <van-row
      @click="goBaryy(item)"
      class="hospitals"
      v-for="item in HomeArr.hospitals"
      :key="item.id"
    >
      <van-col span="6">
        <van-image :src="item.avatar_url" />
      </van-col>

      <van-col span="15">
        <div class="yy-h">{{ item.name }}</div>
        <div class="yy-box">
          <span>{{ item.rank }}</span>
          &nbsp;
          <span>{{ item.label }}</span>
        </div>
        <div class="yy-desc">{{ item.intro }}</div>
      </van-col>
    </van-row>
  </div>
</template>

<script setup>
// imports and composables
import { onMounted, reactive } from "vue";
import { IndexViews } from "../../api/index";
import { useRouter } from "vue-router";
const HomeArr = reactive({
  hospitals: [],
  nav2s: [],
  navs: [],
  now: "",
  slides: [],
});

const router = useRouter();

const goBarkj = (index) => {
  router.push(`/createOrder?id=${HomeArr.nav2s[index].id}`);
};

const goBaryy = (item) => {
  router.push(`/createOrder?id=${item.id}`);
};

onMounted(() => {
  IndexViews().then(({ data }) => {
    // 逐个属性赋值，保持响应性
    Object.assign(HomeArr, data.data);
    // console.log(data.data);
    // console.log(HomeArr);
  });
});
</script>

<style lang="less" scoped>
.home {
  padding: 0 12px;
  background-color: #fff;
  min-height: 100vh;

  .header {
    display: flex;
    align-items: center;
    padding: 10px 0;
    background: #fff;

    &-left {
      display: flex;
      align-items: center;
      padding: 0 12px;
      font-size: 16px;
      color: #333;

      .txt {
        font-size: 18px;
        margin-right: 4px;
        font-weight: 700;
      }

      .van-icon {
        font-size: 14px;
        color: #969799;
      }
    }

    &-right {
      flex: 1;

      .van-search {
        padding: 0;

        :deep(.van-search__content) {
          background-color: #f7f8fa;
          border-radius: 16px;
        }
      }
    }
  }

  .van-swipe {
    margin-top: 10px;
    border-radius: 8px;
    overflow: hidden;
    height: 160px;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  // 新增样式（添加在现有 .home 样式内部或之后）
  .ksannui {
    justify-content: space-between;
    .van-col {
      margin: 8px 0;

      .van-image {
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        transition: transform 0.3s ease;

        &:active {
          transform: scale(0.98);
        }
      }
    }
  }

  .hospitals {
    background: #fff;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 12px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
    justify-content: space-between;

    .van-col {
      display: flex;
      align-items: flex-start;
      flex-direction: column;
      &:first-child {
        justify-content: center;
      }

      .van-image {
        width: 100px;
        height: 90px;
        border-radius: 50%;
        border: 2px solid #f5f5f5;
      }
    }

    .yy-h {
      font-size: 16px;
      font-weight: 600;
      color: #333;
      margin-bottom: 4px;
      .text-ellipsis(); // 文字超出显示省略号（需定义混合）
    }

    .yy-box {
      display: flex;
      align-items: center;
      margin-bottom: 6px;

      span {
        &:first-child {
          color: #ff6b00;
          background: #fff4eb;
          padding: 2px 6px;
          border-radius: 4px;
          font-size: 12px;
        }

        &:last-child {
          color: #1989fa;
          font-size: 12px;
        }
      }
    }

    .yy-desc {
      color: #999;
      font-size: 13px;
      line-height: 1.4;
      .multi-line-ellipsis(2); // 两行省略（需定义混合）
    }
  }

  // 公用混合函数（添加在文件顶部）
  .text-ellipsis() {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .multi-line-ellipsis(@lines) {
    display: -webkit-box;
    -webkit-line-clamp: @lines;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}
</style>